import {ModalForm, ProFormRadio, ProFormSelect, ProFormText, ProFormTextArea} from '@ant-design/pro-components';
import {list} from '@/services/auto-keeper-cluster-api';
import React from 'react';
import {Link} from "umi";

export type CreateOrUpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: API.Node) => void;
  onSubmit: (values: API.Node) => Promise<void>;
  updateModalOpen: boolean;
  values?: Partial<API.Node>;
  title?:string;
};

const CreateOrUpdateForm: React.FC<CreateOrUpdateFormProps> = (props) => {

  return (<ModalForm
      title={props?.title}
      layout={"horizontal"}
      width="700px"
      labelAlign={"right"}
      labelCol={{span: 6}}
      open={props.updateModalOpen}
      onFinish={props.onSubmit}
      modalProps={{destroyOnClose: true, onCancel: () => props.onCancel()}}
    >
      <ProFormText initialValue={props?.values?.id} hidden={true} name='id'/>
      <ProFormText
        initialValue={props.values?.name}
        rules={[
          {
            required: true,
            message: '机器名称不能为空',
            max: 15,
            min: 4
          },
        ]}
        width="md"
        label="机器名称"
        name="name"
      />
      <ProFormText
        initialValue={props.values?.ip}
        rules={[
          {
            required: true,
            message: '机器IP不能为空',
          },
        ]}
        width="md"
        label="机器IP"
        name="ip"
      />
      <ProFormText
        initialValue={props.values?.port}
        rules={[
          {
            required: true,
            message: '机器端口不能为空',
          },
        ]}
        width="md"
        label="机器端口"
        name="port"
      />
      <ProFormText
        initialValue={props.values?.parameters?.downloadPort}
        width="md"
        label="下载端口"
        name={["parameters","downloadPort"]}
      />
      <ProFormText
        initialValue={props.values?.parameters?.mbeanPort}
        width="md"
        label="MBean端口"
        name={["parameters","mbeanPort"]}
      />
      <ProFormText
        initialValue={props.values?.parameters?.externalIp}
        width="md"
        label="外部IP"
        name={["parameters","externalIp"]}
      />
      <ProFormRadio.Group
        initialValue={props.values?.parameters?.useExternalIp || false}
        name={["parameters","useExternalIp"]}
        label="启用外部IP"
        radioType="radio"
        options={[
          {
            label: '是',
            value: true,
          },
          {
            label: '否',
            value: false,
          },
        ]}/>
      <ProFormSelect
        label="zookeeper集群"
        initialValue={props?.values?.parameters?.zkCluster?.id}
        width={"md"}
        tooltip={<>配置<Link to={"/machine-manager/auto-keeper"}>Zookeeper</Link></>}
        rules={[
          {
            required: true,
            message: 'zookeeper集群不能为空',
          },
        ]}
        request={() => list({size:1000}).then(res => res?.data?.map((a:API.AutoKeeperCluster) => ({label: a.clusterName, value: a.id})))}
        name={["parameters", "zkCluster","id"]}
      />
      <ProFormTextArea
        initialValue={props.values?.description}
        width="md"
        label="描述"
        name="desc"
      />

    </ModalForm>
  );
};

export default CreateOrUpdateForm;
